<template>
  <div class="information">
    <!-- 类目信息 -->
    <div class="information-category">
      <div class="information-category-title">类目重要信息</div>
      <div class="information-category-box">
        <div class="category-box-list">
          <div class="category-box-list-name">
            <div>
              <span>*</span> 品牌
              <el-tooltip
                class="item"
                effect="dark"
                content="Top Center 提示文字"
                placement="top"
              >
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div>ype1</div>
          </div>
          <div class="category-box-list-input">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
          <div class="category-box-list-attributes">插入属性</div>
        </div>
      </div>
    </div>
    <!-- 描述信息及关键词 -->
    <div class="information-describe">
      <div class="information-describe-title">描述信息及关键词</div>
      <div class="information-describe-box">
        <div
          class="describe-box-list"
          v-for="(item, index) in describeData"
          :key="index"
        >
          <div class="describe-box-list-title">
            <div class="describe-box-list-title-name">
              <span v-if="item.required == 'required'">*</span>
              目标受众关键字
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.accepted_values"
                placement="top"
              >
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="describe-box-list-title-type">
              {{ item.field_name }}
            </div>
          </div>
          <div class="describe-box-list-input">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="item.field_value"
            >
            </el-input>
          </div>
          <div class="describe-box-list-attributes">插入属性</div>
        </div>
      </div>
    </div>
    <!-- 其他属性信息 -->
    <div class="information-rests">
      <div class="information-rests-title">其他属性信息</div>
      <div class="information-rests-tab">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="用户理" name="first">用户-管理</el-tab-pane>
          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth"
            >定时任务补偿</el-tab-pane
          >
        </el-tabs>
      </div>
      <div class="information-rests-box">
        <div class="rests-box-list"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StencilInformation',
  components: {},
  props: {
    categoriesData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      activeName: 'second',
      input: '',
      textarea: '',
      describeData: [], // 描述信息
    };
  },
  computed: {},
  watch: {
    categoriesData(val) {
      console.log(val);
    },
  },
  created() {
    if (Object.keys(this.categoriesData).length) {
      const categoriesData = this.categoriesData;
      this.setInformation(categoriesData);
    }
  },
  methods: {
    // 设置各个属性值
    setInformation(categoriesData) {
      const that = this;
      // 描述信息及关键词
      categoriesData.description_amazon_template_content.forEach((ol) => {
        that.describeData.push({
          ...ol,
          field_name: ol.local_label_name,
          field_value: '',
        });
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.information {
  // 类目信息
  .information-category {
    .information-category-title {
      height: 40px;
      line-height: 40px;
      font-weight: 700;
    }
    .information-category-box {
      .category-box-list {
        display: flex;

        .category-box-list-name {
          width: 120px;
          text-align: right;
          font-size: 12px;
          > div {
            &:nth-child(1) {
              font-size: 14px;
              span {
                color: red;
              }
            }
          }
        }

        .category-box-list-input {
          padding-left: 12px;
          flex: 1;
        }

        .category-box-list-attributes {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
    }
  }
  // 描述信息及关键词
  .information-describe {
    .information-describe-title {
      height: 40px;
      line-height: 40px;
      font-weight: 700;
    }
    .information-describe-box {
      .describe-box-list {
        display: flex;
        margin-bottom: 12px;

        .describe-box-list-title {
          width: 120px;
          text-align: right;

          .describe-box-list-title-name {
            display: flex;
            align-items: center;
            font-size: 14px;

            span {
              color: red;
            }
          }
          .describe-box-list-title-type {
            font-size: 12px;
          }
        }

        .describe-box-list-input {
          padding-left: 12px;
          flex: 1;
        }
        .describe-box-list-attributes {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
    }
  }
  // 其他属性信息
  .information-rests {
    .information-rests-title {
      height: 40px;
      line-height: 40px;
      font-weight: 700;
    }
  }
}
</style>
